<template>
  <div class="my-collapse">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "MyCollapse",
  props: {
    accordion: Boolean,
    value: {
      type: Array | String | Number,
      default() {
        return [];
      },
    },
  },
  provide() {
    return {
      collapse: this,
    };
  },
  data() {
    return {
      activeValues: [].concat(this.value),
    };
  },
  watch: {
    value(value) {
      this.activeValues = [].concat(value);
    },
  },
  created() {
    this.$on("handleItemClick", this.handleItemClick);
  },
  methods: {
    handleItemClick(item) {
      if (this.accordion) {
        this.activeValues =
          this.activeValues[0] === item.value ? [] : [item.value];
        this.$emit("input", this.activeValues[0]);
        this.$emit("change", this.activeValues[0]);
      } else {
        let index = this.activeValues.indexOf(item.value);
        if (index > -1) {
          this.activeValues.splice(index, 1);
        } else {
          this.activeValues.push(item.value);
        }
        this.$emit("input", this.activeValues);
        this.$emit("change", this.activeValues);
      }
    },
  },
};
</script>

<style lang="scss">
.my-collapse {
  position: relative;
  border: 1px solid #eff2f5;
  border-radius: 14px;
  overflow: hidden;
}
.my-collapse-item {
  position: relative;
  border-bottom: 1px solid #eff2f5;
  &:last-child {
    border-bottom: none;
  }
}
.my-collapse-item__header {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #181c32;
  font-size: 15px;
  font-weight: bold;
  padding: 0 20px;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;

  i {
    font-weight: normal;
    font-size: 12px;
    transition: transform 0.15s ease-in-out;
  }

  &.active {
    color: #00b2ff;
    background-color: #f5f8fa;

    i {
      transform: rotate(-180deg);
    }
  }

  &.disabled {
    color: #b5b5c3;
    cursor: not-allowed;
  }
}

.my-collapse-item__body {
  will-change: height;
  transition: height 0.3s ease;
  overflow: hidden;
}

.my-collapse-item__content {
  position: relative;
  padding: 20px;
}
</style>